<template>
  <div>
    <!-- 目标: 用户选择栏目, 把用户选中的栏目信息在下面列表显示出来

提示: vue变量是数组类型, 绑定在checkbox标签上 -->
      
      <!-- 当v-model 和复选框双向绑定时，如果绑定的的值是非数组，
      那么v-model 绑定的就是checked属性，
      如果绑定的是数组，那么v-model 绑定的就是value属性，
      选中就是向这个数组中添加对应的value值，取消选中就是从这个
      数组中删除对应的value值 -->
      <h2>选择喜欢的</h2>
      <div>
        <input type="checkbox" value="看电影" v-model="hobby">看电影
        <input type="checkbox" value="滑冰" v-model="hobby">滑冰
        <input type="checkbox" value="跑步" v-model="hobby">跑步
        <input type="checkbox" value="吃火锅" v-model="hobby">吃火锅
        <input type="checkbox" value="爬山" v-model="hobby">爬山
        <input type="checkbox" value="游泳" v-model="hobby">游泳
      </div>
      <ul>
        <!-- 绑定checkbox后，每点击一个就会增加一个在ul里面，
        取消一个就消失一个
         -->
        <li v-for="(item,index) in hobby" :key="index"> {{ item }}</li>
      </ul>

  </div>
</template>

<script>
export default {
data() {
  return {
    hobby:[]
  }
}
}
</script>

<style>

</style>